Overview

• Overrides default margin for more elements.
• Adds an o-rhythm object class for adding whitespace vertically between adjacent child elements.
• Adds modifiers based on common use cases to promote consistency.

Thought Process

I decided to abandon our previous utility-based approach to this after reviewing our live site and making a few observations:

• The previous utilities included 42 separate classes. Of these, only ten were ever used.
• Of the ten classes we used, four were the same step (u-staggerItems1 compared to u-spaceItems1) and made little to no visible difference if swapped for the opposite utility of the same step.
• Of those six remaining classes, three were used only once or twice. These outliers all seem to be within a step of more common values, which suggests to me that having so much choice was resulting in unintentional inconsistencies.

I chose the name rhythm because I think it just feels like what the pattern is trying to accomplish. Every time I'm outvoted on this, I find myself missing it… so I decided to suggest it again in hopes that I'll gradually wear everyone else down. 😉

To make sure I was covering the common use cases, I made a spreadsheet tracking which modular scale steps were used most often:

I translated the intent of these to the following modifier classes:

Screenshots